<template>
<div class="news-box">
			<div class="mui-card" v-for="item in msg" :key="item.id">
				<div class="news-title">{{ item.title }}</div>
                <p class="date">{{ item.date }}</p>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<img :src="item.images" alt="">
					</div>
				</div>
                <p class="news-caption">{{item.desc}}</p>
				<div class="details">
                    <div class="details-left">查看详情</div> <div class="details-right"></div>
                </div>
			</div>
</div>
</template>
<script>
 export default {
     data(){
         return {
             msg:[        //没有后台数据，模仿后台数据
                {
                id: 1,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/jfs/t1/4748/14/9314/97451/5bac587eE329a9b48/cbb6c07075c3e7da.jpg!cr_1125x549_0_72',
                desc: "厉害了"
            },
            {
                id: 2,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/jfs/t1/2149/7/8648/101849/5ba9e070E518446eb/d51a88c0636b0ee2.jpg!cr_1125x549_0_72',
                desc: "厉害了"
            },
            {
                id: 3,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/s1125x690_jfs/t1/5951/5/6213/280694/5ba1efd6Edb815683/ab8e57adfc030317.jpg!cr_1125x549_0_72!q70.jpg.dpg',
                desc: "厉害了"
            },
            {
                id: 4,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/jfs/t1/3397/4/8950/69783/5bab2d84Ef8cf55cb/ed70de4906b6257c.jpg!cr_1125x549_0_72',
                desc: "厉害了"
            },
            {
                id: 5,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/s1125x690_jfs/t1/2132/25/7096/55881/5ba49df6Edb33b301/ed2ba2fa10c43eb6.jpg!cr_1125x549_0_72!q70.jpg.dpg',
                desc: "厉害了"
            },
            {
                id: 6,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/s1125x690_jfs/t1/559/40/8896/144660/5ba9d524E9e154df9/4d7d7ea7aef49cc0.jpg!cr_1125x549_0_72!q70.jpg.dpg',
                desc: "厉害了"
            },
            {
                id: 7,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/s1125x690_jfs/t1/2896/3/6854/211166/5ba466d3E73b143c4/a1880254ba2f275e.jpg!cr_1125x549_0_72!q70.jpg.dpg',
                desc: "厉害了"
            },
            {
                id: 8,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/s1125x690_jfs/t1/559/40/8896/144660/5ba9d524E9e154df9/4d7d7ea7aef49cc0.jpg!cr_1125x549_0_72!q70.jpg.dpg',
                desc: "厉害了"
            },
            {
                id: 9,
                title: "How do you do",
                date: "2018-9-27",
                images: 'https://m.360buyimg.com/mobilecms/s1125x690_jfs/t1/2132/25/7096/55881/5ba49df6Edb33b301/ed2ba2fa10c43eb6.jpg!cr_1125x549_0_72!q70.jpg.dpg',
                desc: "厉害了"
            }

             ]
         }
     },
     
 }   


</script>

<style lang="scss" scoped>
.news-box{
    margin-top: 0;
    .mui-card{
        box-sizing: border-box;
        padding: 10px 10px;
        .news-title{
            font-size: 20px;
            padding-bottom: 10px;
         
        }
        .date{
            padding-bottom: 5px;
            border-bottom: 1px solid #ccc;
        }
        .mui-card-content-inner{
            padding: 0;
            height: 180px;
            padding-bottom: 5px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .news-caption{
            font-size: 16px;
            color: #000;
            padding: 5px 0;
            border-bottom: 1px solid #ccc;
        }
        .details{
            font-size: 12px;
            color: #787878;
            // position: relative;
            padding: 0 5px;
            display: flex;
            justify-content: space-between;      //用CSS3的属性让箭头对齐
             align-items: center;
           
            .details-right{
                width: 10px;
                height: 10px;
                border-top: 1px solid #787878;
                border-right: 1px solid #787878;
                transform: rotate(45deg);
                // position: absolute;
                // top: 0;
                // right: 0;
            }
        }
    }
 
}
</style>
